<template>
    <div v-loading="loading" class="app-container dialog">
        <div class="title">操作系统故障</div>
        <div class="Subhead">基本信息</div>
        <el-form
            :model="form"
            :rules="rules"
            ref="ruleForm"
            label-width="140px"
            class="demo-ruleForm"
        >
            <el-form-item label="标题" prop="title">
                <el-input :readonly="taskName != '发起'" style="width: 760px" v-model="form.title"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="联系人员" prop="contact_person">
                        <el-input :readonly="taskName != '发起'" v-model="form.contact_person"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="联系方式" prop="contact_information">
                        <el-input :readonly="taskName != '发起'" v-model="form.contact_information"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="Subhead">故障信息</div>
            <el-row>
                <el-col :span="6">
                    <el-form-item v-loading="loading" label="应用系统" prop="appSystem" @change="changeappSystem">
                        <el-select :disabled="taskName != '发起'" clearable filterable v-model="form.appSystem">
                            <el-option v-for="item in xtList" :key="item.id" :label="item.projectname" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="网络环境" prop="network_environment">
                        <el-select :disabled="taskName != '发起'" clearable filterable v-model="form.network_environment">
                            <el-option v-for="item in networkList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="IP地址" prop="ip_location">
                        <el-input :readonly="taskName != '发起'" v-model="form.ip_location"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="操作系统" prop="operating_system">
                        <el-select :disabled="taskName != '发起'" clearable filterable v-model="form.operating_system">
                            <el-option v-for="item in operatingSystemList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="允许关机时间" prop="allow_shut_down_time">
                        <el-select :disabled="taskName != '发起'" clearable filterable v-model="form.allow_shut_down_time">
                            <el-option v-for="item in ShutDownList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="故障现象">
                <editor :readonly="taskName != '发起'"
                    v-model="form.fault_phenomenon"
                    style="
                        min-height: 192px;
                        max-height: 400px;
                        overflow-y: auto;
                    "
                    :min-height="192"
                    :max-height="400"
                />
            </el-form-item>
        </el-form>
        <div class="Subhead">附件
            <el-upload
                style="display: inline-block;"
                class="upload-demo"
                accept
                v-if="taskName == '发起'"
                list-type="picture"
                :show-file-list="false"
                ref="upload"
                :file-list="fileList"
                action=""
                :on-remove="handleChange"
                :on-change="handleChange"
                :auto-upload="false"
            >
            <img style="width: 20px;cursor: pointer;vertical-align: middle;" 
                 src="../../../assets/icons/add.png" 
                alt="">
            </el-upload>
        </div>
        <el-table
            :data="fileList"
        >
            <el-table-column label="文件名称">
                <template slot-scope="scope">
                    {{scope.row.fileName ? scope.row.fileName : scope.row.name.substring( 0 ,scope.row.name.lastIndexOf("."))}}
                </template>
            </el-table-column>
            <el-table-column label="文件类型">
                <template slot-scope="scope">
                     {{ scope.row.fileExt ? scope.row.fileExt : scope.row.name.substring(scope.row.name.lastIndexOf(".") + 1,scope.row.name.length)}}
                </template>
            </el-table-column>
            <el-table-column label="">
                <template slot-scope="scope">
                    <span :style="scope.row.fileExt ? 'color:green;' : 'color:red;'">
                        {{scope.row.fileExt ? '已上传' : ''}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="260"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-view"
                        v-show="scope.row.fileExt == 'jpeg' ||
                                    scope.row.fileExt == 'jpg' ||
                                    scope.row.fileExt == 'png' ||
                                    scope.row.fileExt == 'pdf' ||
                                    scope.row.fileExt == 'gif'"
                        @click="previewFile(scope.row)"
                        >预览
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        v-if="taskName == '发起'"
                        @click="DeleteFile(scope.row.id)"
                        >删除
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-download"
                        v-if="scope.row.id"
                        @click="download(scope.row)"
                        >下载
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <action-button v-if="taskName" :taskName="taskName" :loading="btnLoading" @changeExamineShow="changeExamineShow"/>
        <el-dialog :visible.sync="dialogVisible">
            <div style="max-height: 90vh; overflow-y: scroll">
                <img width="100%" :src="dialogImageUrl" alt="" />
            </div>
        </el-dialog>
        <el-dialog :title="num==1?'通过':'不通过'" :visible.sync="visible" append-to-body>
          <el-form ref="form" :model="form"  label-width="100px">
            <el-form-item label="意见:">
              <el-input type="textarea" style="width: 100%" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入意见"
                v-model="comment">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button :loading="btnLoading" type="primary" @click="changeExamineShow(num,true)">确 定</el-button>
            <el-button :loading="btnLoading" @click="visible=false">取 消</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
import { treeselect } from "@/api/system/dept";
import Editor from "@/components/Editor";
import { AllcloudUpList } from "@/api/cloud/cloud";
import { definition } from "@/api/WorkOrder/OperationMaintenance.js"
import { uploadFile } from "@/api/system/upload.js";
import { Getformdata,taskComplete } from "@/api/todoItem/todo.js";
import actionButton from "@/components/actionButton/index.vue";
import {
    DelectUploadFile
  } from "@/api/cloud/cloud";
export default {
    name: "systemFailuredetails",
    components: {
        Editor,actionButton
    },
    data(){
        return{
          visible: false,
          comment:'',
          num:1,
            loading:false,
            taskName:'',
            title:'',
            taskId:'',
            definitionName:'',
            btnLoading:true,
            form:{
                name:''
            },
            cloudSupplier: '',
            //上云系统列表
            xtList: [],
            // 关机时间下拉数组
            ShutDownList:[
                {
                    id:'1',
                    name:'上班时间'
                },
                {
                    id:'2',
                    name:'非上班时间'
                },
                {
                    id:'3',
                    name:'不能关闭'
                },
                {
                    id:'4',
                    name:'其他时间'
                }
            ],
            // 系统状态
            SystemStateList:[
                {
                    id:'1',
                    name:'从系统选择'
                },
                {
                    id:'2',
                    name:'其他'
                }
            ],
            // 操作系统下拉数据
            operatingSystemList:[
                {
                    id:'1',
                    name:'Linux'
                },
                {
                    id:'2',
                    name:'Windows'
                },
            ],
            // 网络环境下拉数据
            networkList:[
                {
                    id:'1',
                    name:'政务外网'
                },
                {
                    id:'2',
                    name:'互联网'
                }
            ],
            fileList:[],
            rules:{

            },
            base_url: process.env.VUE_APP_BASE_API,
            dialogImageUrl: "",
            dialogVisible: false,
        }
    },
    computed: {
        visitedViews() {
            return this.$store.state.tagsView.visitedViews
        },
        routerUrl(){
            return this.$route.path
        }
    },
    watch: {
        visitedViews(value) {
            if(value){
                if(this.$options.name == 'systemFailuredetails'){
                    return
                }
                this.$destroy(this.$options.name)
            }
        },
        routerUrl(value){
            if(value == '/faultdeclara/systemFailures/details'){
                this.Getdata()
            }
        }
    },
    created(){
        this.Getdata()
    },
    methods:{
        changeappSystem(val){
            this.xtList.forEach(item=>{
                if(item.id == val){
                    this.cloudSupplier = item.supplierCode
                }
            })
        },
        Getdata(){
            this.GetListSelect()
            var list = JSON.parse(sessionStorage.getItem('systemFailures'));
            this.title = list.instanceName;
            this.taskId = list.taskId;
            this.definitionName = list.definitionName;
            this.taskName = list.taskName;
            this.btnLoading = false
            Getformdata(list.instanceId).then(res=>{
                this.form = res.data
                this.fileList = res.data.files
            })
        },
        GetListSelect(){
            this.loading = true
            AllcloudUpList().then(response => {
                this.xtList = response.rows;
                this.loading = false
            })
        },
        handleChange(row,fileList){
            this.fileList = fileList;
        },
        previewFile(item) {
          this.dialogImageUrl = this.base_url + item.filePath;
          this.dialogVisible = true;
        },
        download(item){
            let downloadFile = this.base_url + '/system/downloadFile?fileName=' + item.fileName + '&filePath=' + item.filePath
            window.location.href = downloadFile
            return
        },
        DeleteFile(id) {
            this.$confirm('本次操作会永久删除文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                DelectUploadFile(id).then(res => {
                    if (res.code == 200) {
                        this.form.files = this.form.files.filter(item => {
                        if (item.id == id) {

                        } else {
                            return item
                        }
                        })
                        this.fileList = this.fileList.filter(item => {
                        if (item.id == id) {

                        } else {
                            return item
                        }
                        })
                        this.$message({
                        message: '删除成功',
                        type: 'success'
                        });
                    }
                })
            });
        },
        changeExamineShow(num,flag){
         
          this.$prompt('请输入审批意见', num == 1 ? '通过': '不通过', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          inputValue:num == 1 ? '通过': '不通过',
          }).then((resp) => {
                this.loading = true
                var Flies = []
                if(this.fileList){
                    this.fileList.forEach((item) => {
                        if (item.id) {
                        } else {
                            Flies.push(item);
                        }
                    });
                }
                if(this.taskName == '发起' && Flies.length > 0){
                    let param = new FormData();
                        param.append("key", "file");
                        Flies.forEach((item) => {
                            param.append("file", item.raw);
                        });
                    uploadFile(param).then(ress=>{
                        if(this.form.files){

                        }else{
                            this.form.files = []
                        }
                        this.form.files.push(...ress.data)
                        this.fileList = []
                        Flies = []
                        this.form.ipList = this.data
                        var obj = {
                            taskId: this.taskId,
                            actionName: num == 1 ? '通过': '不通过',
                            action: num == 1 ? 'COMPLETE': 'BACK',
                            formData: this.form,
                            formDefKey:this.form.formDefKey,
                            files:this.form.files,
                            comment:resp.value
                        }
                        obj.variables = {
                            cloudSupplier: this.cloudSupplier.toLowerCase() + '_cloud_provider'
                        }
                        taskComplete(obj).then(res=>{
                            if(res.code == 200){
                                this.$message({
                                    type: 'success',
                                    message: res.msg
                                }); 
                                this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
                                this.$destroy(this.$options.name)
                                this.$router.push('/todoItem/todo')
                                this.loading = false
                            }
                        }).catch(err=>{
                            this.loading = false
                        })
                    })
                    .catch(err=>{
                        this.$message({
                            message: err.msg,
                            type: "error",
                        });
                        this.fileList = this.form.files
                        this.loading = false
                    })
                }else{
                    var obj = {
                        taskId: this.taskId,
                        actionName: num == 1 ? '通过': '不通过',
                        action: num == 1 ? 'COMPLETE': 'BACK',
                        formData: this.form,
                        formDefKey:this.form.formDefKey,
                        files:this.fileList,
                        comment:resp.value
                    }
                    if(this.taskName == '发起'){
                        obj.variables = {
                            cloudSupplier: this.cloudSupplier.toLowerCase() + '_cloud_provider'
                        }
                    }
                    taskComplete(obj).then(res=>{
                        if(res.code == 200){
                            this.$message({
                                type: 'success',
                                message: res.msg
                            }); 
                            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
                            this.$destroy(this.$options.name)
                            this.$router.push('/todoItem/todo')
                            this.loading = false
                        }
                    }).catch(err=>{
                        this.loading = false
                    })
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });   
                this.loading = false       
            });
        }
    }
}
</script>

<style scoped lang="scss">
.dialog {
    .title {
        text-align: left;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 4px solid #38b3aa;
    }
    .Subhead {
        text-align: left;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: bold;
        padding-left: 4px;
        border-left: 2px solid #38b3aa;
    }
    .tabletitle{
        width: 100%;
        text-align: center;
        font-weight: bold;
        border: 1px solid rgb(248,248,249);
        height: 40px;
        line-height: 40px;
        border-bottom: none;
    }
}
</style>